<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <% String path = request.getContextPath();%>
    	<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    	<title>修改文章 </title>
<jsp:include page="/web/manager/inc/header.jsp"></jsp:include>
	<div class="new-patients main_container">
	      <form target="frame1" onsubmit="return subUpdate()" action="<%=path %>/ArticleController?action=updateArticle " method="post" enctype="multipart/form-data"> 
	      <script type="text/javascript">
	      var check = false;
	      	function subUpdate(){
	      		checkInput();
	      		console.log(check);
	      		if(!check){
	      			alert("输入不能为空！！！");
	      		}
	      		return check;
	      	}
	      	function checkInput(){
	      		if(!($("#subject").text()=="请选择")&&!($("#articleTitle").val()=="")&&!($("#articleContent").val()=="")){
	      			check=true;
	      			alert("修改成功");
	      		}
	      	}
	      </script>
                    <div class="row page-titles mx-0">
                        <div class="col-sm-6 p-md-0">
                            <div class="welcome-text">
                                <h4 class="text-primary">修改文章</h4>
                            </div>
                        </div>
                       
                    </div>
                    
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="card">
                                <div class="card-header">
                                    <h5 class="card-title">选择文章类别</h5>
                                               <div class="col-xl-4">
                                                    <div class="form-group">                                 
                                                        <select name="subject" class="form-control form-select" id="subject">
                                                            
                                                        </select>
                                                        
                                                    </div>
                                                </div>
                                     <h5 class="card-title">选择文章标题</h5>
                                               <div class="col-xl-4">
                                                    <div class="form-group">                                 
                                                        <select name="article" class="form-control form-select" id="article">
                                                             
                                                        </select>
                                                        
                                                    </div>
                                                </div>                                               
                               		 </div>
                              	 </div>
                              </div>
                          </div>
                                            
                                <div class="card-body">
                                    <div class="basic-form">
                                                                             
                                             <div class="card-body">
                                                <div class="col-xl-6">
                                                    <div class="form-group">
                                                       <span>标题</span>
                                                       <input type="hidden" name="articleId" id="articleId">
                                                        <input id="articleTitle" name="title" type="text" class="form-control"  />
                                                    </div>
                                                </div>
                                                <div class="">
                                                    <div class="form-group">
                                                       <span>内容</span>
                                                       <textarea name="content" id="articleContent" cols="30" rows="10" class="form-control"></textarea>
                                                        
                                                    </div>
                                                </div>
                                                <div class="">
                                                    <div class="form-group">
                                                       <span>原照片:</span>
                                                        <div id="oldPicture"></div>
                                                        <span>新照片:</span>
                                                        <div id="newPicture"></div>
                                                    </div>
                                                </div> 
                                                <div class="">
                                                    <div class="form-group">
                                                       <span>修改照片</span>
                                                        <input id="changePic" type="file" name="newPicture">
                                                    </div>
                                                </div>                                              
                                            </div>             
                                            <div class="form-group text-right">
                                                <button type="submit" class="btn btn-primary float-end ">修改完成</button>
                                            </div>
                                           <iframe name="frame1" frameborder="0" id="frame"></iframe>                                        <iframe name="frame1" frameborder="0" id="frame"></iframe>
                                        </form>
                                    </div>
                  				
                  				

  <jsp:include page="/web/manager/inc/footer.jsp"></jsp:include>
  									 <script type="text/javascript">
                                        	var path = "${pageContext.request.contextPath}";
                                        	var subjects = [];
                                        	var articleJson = [];
                                        	var subjectSelectedIndex=0;
                                        	//刷新标题
                                        	function refreshSubject(){
                                        		$("#subject").append("<option>请选择</option>");
                                        		subjects.forEach(function(subject){
                                        			$("#subject").append($("<option value='"+subject.id+"'>"+subject.name+"</option>"))
                                        		})
                                        	}
                                        	//刷新文章题目
                                    		function refreshArticle(articles){
                                    			$("#article").empty();
                                    			$("#article").append("<option >请选择</option>");
                                    			articles.forEach(function(onearticle){
                                    				$("#article").append("<option value='"+onearticle.id+"'>"+onearticle.title+"</option>")
                                    			})
                                    			
                                    		}
                                    		//刷新面板内容，根据文章索引查找json对应数组下标
                                    		function refreshPanel(articleSelectedIndex){
                                    			console.log("subjectId"+$("#subject").val());
                                    				$("#oldPicture").empty();
                                    				var penel = articleJson[articleSelectedIndex];
                                    				console.log(articleJson[articleSelectedIndex]);
                                    				var title =  penel.title;
                                    				var content = penel.content ;
                                    				var picture = penel.pic;
                                    				var articleId=penel.id;
                                    				$("#articleId").val(articleId);
                                    				$("#articleTitle").val(title);
                                            		$("#articleContent").val(content);
                                            		var path = "${pageContext.request.contextPath}";
                                            		$("#oldPicture").html("<img id='showPic' style='width:100px;height:100px' src='"+path+"/images/articleImages/"+picture+"'>")
                                    		}
                                        	$(function(){
                                        		fileRead();
                                        		$.getJSON(path+"/ArticleController?action=findSubjectAjax",function(data){
                                        			subjects = data;
                                        			refreshSubject();
                                        		})
                                        		$("#subject").change(function(){
                                        			subjectSelectedIndex = this.selectedIndex-1;
                                        			//console.log(subjectSelectedIndex);
                                        			//如果是之前选过的的subject(sujects[]会存入)，那么不在请求ajax获取，使用缓存
                                        			/* if(subjects[subjectSelectedIndex].articles){
                                        				//刷新 subjects[]里面的 articles json对象  
                                        				refreshArticle(subjects[subjectSelectedIndex].articles);
                                        				return;
                                        			} */
                                        			//如果其中的 subject之前没有选中过，请求ajax ，获得对应id的article
                                        			var subjectId = subjects[subjectSelectedIndex].id
                                        			//请求ajax ，并放入subject 数组
                                        			$.getJSON(path+"/ArticleController?action=findArticleById&subjectId="+subjectId,function(data){
                                        				subjects[subjectSelectedIndex].articles=data;
                                        				var articles = data;
                                        				articleJson = data;
                                        				refreshArticle(articles);
                                        			})
                                        			
                                        		})
                                        		 $("#article").change(function(){
                                        			 var articleSelectedIndex = (this.selectedIndex)-1;
                                        			 console.log("文章id--"+articleSelectedIndex);
                                        			 refreshPanel(articleSelectedIndex);
                                        			
                                        		}) 
                                        	})
                                        	function fileRead(){
                                    		$("#changePic").change(function (){
                                    			$("#newPicture").empty();
                                    			//$("#edit h3").remove();
                                    			var file = $(this).get(0).files[0];
                                    			console.log(file.type);  
                                    			/* if(!/image/w+/.test(file.type)){
                                    				alert("文件必须为图片！");
                                    				return false;
                                    			} */
                                    			var reader = new FileReader();
                                    				/* 将文件读取为一串Data URL字符串
                                    				，将小文件以一种特殊格式的URL地址直接读入页面。
                                    				小文件指图像与html等格式的文件。 */
                                    			reader.readAsDataURL(file);
                                    				
                                    			//.onload() 数据读取成功完成时触发
                                    			reader.onload = function(e){
                                    				$("#newPicture").html("<img id='checkPic' style='width:120px; height:120px;' src='"+this.result+"'>");
                                    			}
                                    			
                                    		})
                                    		
                                    	}
                                        </script>